/* 获取元素 */
const button = document.getElementById("button");
const toasts = document.getElementById("toasts");
/* 初始化 */
const messages = [
  "Message One",
  "Message Two",
  "Message Three",
  "Message Four",
];

const types = ["info", "success", "error"];

/* 点击事件 */
button.addEventListener("click", () => createNotification());

function createNotification(message = null, type = null) {
  /* 创建div元素 */
  const notif = document.createElement("div");
  /* 添加样式 */
  notif.classList.add("toast");
  /* 添加样式 */
  notif.classList.add(type ? type : getRandomType());
  /* 更改toasts元素内容 */
  notif.innerText = message ? message : getRandomMessage();
  /* 添加到toasts元素中 */
  toasts.appendChild(notif);
  /* 定时器 */
  setTimeout(() => {
    /* 移除创建的元素 */
    notif.remove();
  }, 3000);
}
/* 随机消息 */
function getRandomMessage() {
  return messages[Math.floor(Math.random() * messages.length)];
}
/* 随机类型 */
function getRandomType() {
  return types[Math.floor(Math.random() * types.length)];
}
